
import React from 'react'
import ReactDOM from 'react-dom'
import * as UnitAction  from '../../actions/UnitAction';
import * as UserCenterAction  from '../../actions/UserCenterAction';
import { connect }  from 'react-redux';

import UnitSettingTools from './UnitSettingTools'
import UnitSettingList from './UnitSettingList'
import UnitSettingEdit from './UnitSettingEdit'
import UnitSettingAddSysUser from './UnitSettingAddSysUser'
import UnitBindDetail from './UnitBindDetail'
import UnitBindList from './UnitBindList'


import Paging from '../Paging'

class UnitSettingBody extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      activeData: {},
      isEdit: false,
      search: "",
      activeDetailId: 0
    }
  }

  componentDidMount() {
    var self = this;
    this.$modal = $(ReactDOM.findDOMNode(this.refs.UnitSettingEdit))
    this.$sysUserModal = $(ReactDOM.findDOMNode(this.refs.UnitSettingAddSysUser))
    this.$detailModal = $(ReactDOM.findDOMNode(this.refs.UnitBindDetail))
    this.$bindModal = $(ReactDOM.findDOMNode(this.refs.UnitBindList))
    this.props.dispatch(
      UnitAction.loadUnitsLimitAsync()
    )

    this.props.dispatch(
      UserCenterAction.loadUserCentersAsync()
    )


  }

  componentDidUpdate() {
    // if (this.props.delivery === 403) {
    //   window.location.href = 'login'
    // }
  }

  onCreateClick() {
    this.setState({
      activeData: {},
      isEdit: false
    })
    this.$modal.modal("show")
  }

  onBindClick(){
    this.setState({
    })
    this.$bindModal.modal("show")
  }

  onShowSysUserClick() {
    this.$sysUserModal.modal("show")
  }

  onSysUserSelect(data) {
    this.$sysUserModal.modal("hide")
    var activeData = this.state.activeData;
    activeData.sys_user = data;
    this.setState({
      activeData: activeData
    })
  }

  onSysUserUpdate(data){
    this.props.dispatch(
      UnitAction.submitUsersAsync(data)
    )
    this.$bindModal.modal("hide")
  }



  onDataUpdate(data) {
    data.offset = this.props.offset;
    data.limit = this.props.limit;
    data.unit_desc = this.state.search;
    this.props.dispatch(
      UnitAction.updateUnitsAsync(data)
    )
    this.$modal.modal("hide")
  }

  onDataCreate(data) {

    data.property_id = this.props.sys_user.WorkingProperty.id

    this.props.dispatch(
      UnitAction.createUnitsAsync(data)
    )
    this.$modal.modal("hide")
  }

  onEditClick(data) {

    this.setState({
      activeData: data,
      isEdit: true
    })
    this.$modal.modal("show")
  }

  onDeleteClick(id) {
    if (confirm("确定要删除该户号吗?")) {
      var data = {
        id: id
      }
      data.offset = this.props.offset;
      data.limit = this.props.limit;
      data.unit_desc = this.state.search;
      this.props.dispatch(
        UnitAction.deleteUnitsAsync(data)
      )
      this.$modal.modal("hide")
    }
  }

  onDetailClick(unit_number) {
    this.setState({
      activeDetailId: unit_number
    })

    this.$detailModal.modal("show");
  }

  onPageChange(page) {
    var self = this;
    this.props.dispatch(
      UnitAction.loadUnitsLimitAsync({
        offset: (page-1)*this.props.limit,
        limit: self.props.limit,
        unit_desc: self.state.search
      })
    )
  }

  onDataSearch(text) {
    var self = this;

    this.props.dispatch(
      UnitAction.loadUnitsLimitAsync({
        offset: 0,
        unit_desc: text
      })
    )
    this.setState({
      search: text
    })
  }

  render() {
    var self = this;
    // console.log("render")
    var offset = parseInt(this.props.offset),
        limit = parseInt(this.props.limit),
        count = parseInt(this.props.count)

    var current = Math.ceil(offset/limit) + 1;
    return (
      <div className="content-body unit-content-body" >
        <UnitSettingTools
          onDataSearch = {this.onDataSearch.bind(self)}
          onCreateClick={this.onCreateClick.bind(self)}
          onBindClick={this.onBindClick.bind(self)}
          />
        <UnitSettingList
          data = {this.props.data}
          onEditClick = {this.onEditClick.bind(self)}
          onDeleteClick = {this.onDeleteClick.bind(self)}
          onDetailClick = {this.onDetailClick.bind(self)}
          />
        <Paging
          current = {current}
          count = {count}
          limit = {limit}
          onPageChange = {this.onPageChange.bind(self)}
        />
        <UnitSettingEdit
          ref = "UnitSettingEdit"
          data = {this.state.activeData}
          isEdit = {this.state.isEdit}
          onShowSysUserClick = {this.onShowSysUserClick.bind(self)}
          onDataUpdate = {this.onDataUpdate.bind(self)}
          onDataCreate = {this.onDataCreate.bind(self)}
          />
        <UnitBindList
          ref = "UnitBindList"
          data = {this.state.activeData}
          isEdit = {this.state.isEdit}
          sysuser = {this.props.sysuser}
          onShowSysUserClick = {this.onShowSysUserClick.bind(self)}
          onSysUserUpdate = {this.onSysUserUpdate.bind(self)}
          onDataUpdate = {this.onDataUpdate.bind(self)}
          onDataCreate = {this.onDataCreate.bind(self)}
          />
        <UnitBindDetail
          ref = "UnitBindDetail"
          activeDetailId = {this.state.activeDetailId}
          />
        <UnitSettingAddSysUser
          ref = "UnitSettingAddSysUser"
          sysuser = {this.props.sysuser}
          onSysUserSelect = {this.onSysUserSelect.bind(self)}
          />
      </div>
    )
  }
}

const mapStateToProps = (state, ownProps) => {
  // console.log(state.units)
  return {
    data: state.units.data,
    offset: state.units.offset,
    limit: state.units.limit,
    count: state.units.count,
    sys_user: state.userCenter.data
  }
}

export default connect(mapStateToProps)(UnitSettingBody);
